<template>
  <div id="MainHeader">
    <div class="crumbs">
      <span
        class="crumbs_item"
        v-for="(item, idx) in crumbsArr" :key="item.name"
      >
        <span v-if="idx !== 0" style="margin-right: 4px;">/</span>
        <router-link
          v-if="idx !== (crumbsArr.length - 1)"
          :to="{ name: item.name }"
        >
          <span>{{item.txt}}</span>
        </router-link>
        <a
          v-if="idx === (crumbsArr.length - 1)"
        >
          <span>{{item.txt}}</span>
        </a>
      </span>
    </div>
    <div class="title">
      <span>{{title}}</span>
    </div>
    <div class="add_btn" v-show="showAddProductBtn">
      <router-link
        :to="{ name: 'product_add', params: { isEdit: false }}"
        tag="button"
        class="el-button el-button--warning">
        添加商品
      </router-link>
    </div>
    <div class="add_btn" v-show="showAddTicketBtn">
      <router-link
        :to="{ name: 'ticket_add' }"
        tag="button"
        class="el-button el-button--warning">
        新增奖券
      </router-link>
    </div>
    <div class="add_btn" v-show="showAddActivityBtn">
      <router-link
        :to="{ name: 'activity_add' }"
        tag="button"
        class="el-button el-button--warning">
        新增活动
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainHeader',
  props: [
    'title', 'crumbsArr', 'showAddTicketBtn', 'showAddProductBtn', 'showAddActivityBtn'
  ]
}
</script>

<style scoped lang="scss">
  #MainHeader {
    position: relative;
    padding: 0 0 0 20px;
    height: 120px;
    background: #fff;
    .crumbs {
      position: absolute;
      top: 30%;
      left: 20px;
      transform: translateY(-50%);
      .crumbs_item {
        a {
          color: #c0c4cc;
          margin-right: 4px;
        }
        span {
          display: inline-block;
          font-size: 14px;
        }
        &:last-child {
          a {
            color: #555;
          }
        }
      }
    }
    .title {
      position: absolute;
      top: 60%;
      left: 20px;
      transform: translateY(-50%);
      font-size: 24px;
      font-weight: 900;
      line-height: 24px;
    }
    .add_btn {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }
  }
</style>
